<script setup lang="ts">
import { DrawerContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";
import * as injectKeys from "@/services/injectKeys";
import { ref, inject } from "vue";

const props = defineProps<{ model: DrawerContainer }>();
const model = props.model;

const actionsService = inject(injectKeys.actionsServiceKey)!;

const opened = ref(model.value);
function switchSizebarShow() {
  opened.value = !opened.value;
}

actionsService.register(model.id, "switch_show", switchSizebarShow);
</script>

<template>
  <q-drawer
    class="pybi-drawer"
    data-pybi-auto-width
    v-model="opened"
    v-bind="model.props"
  >
    <q-scroll-area class="fit" style="height: 100%">
      <Dynamic
        :component="cp"
        v-for="cp in props.model.children"
        :key="cp.id"
      ></Dynamic>
    </q-scroll-area>
  </q-drawer>
</template>

<style scoped lang="less"></style>
